<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #wrap {
            width: 600px;
            height: 300px;
            border: 1px solid;

            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            margin: auto;

            display: flex;
        }

        .item {
            width: 200px;
            height: 100px;
            border: 1px solid;
            background: pink;
            box-sizing: border-box;

            text-align: center;
            line-height: 100px;
        }
    </style>
</head>

<body>

    <!--
    1.计算收缩因子(flex-shrink)与基准值(flex-basis)乘的总和
            1 * 200 * 4 = 800
    2.计算收缩因数
        收缩因数=（项目的收缩因子*项目基准值）/第一步计算总和
            1*200 / 800 = 0.25
    3.移除空间的计算
        移除空间= 项目收缩因数 x 负溢出的空间
            0.25 * 200 = 50
-->



    <div id="wrap">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
    </div>
</body>

</html>